<template>
  <div id="app" class="row" style="height: 100%;">
    <div>
      <nav class="navbar navbar-default navbar-custom" role="navigation">
        <div class="container-fluid">
          <!--头部-->
          <div class="navbar-header">
            <!--响应式-->
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#navbar-collapse">
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">博客首页</a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav nav-tabs navbar-left">
              <li class="active"><a data-toggle="tab" href="#home">iOS</a></li>
              <li><a data-toggle="tab" href="#menu1">SVN</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li>
                    <router-link :to="{ name: 'article-write', path: '/mazaiting/write/Android',
                params: {
                  author: 'mazaiting',
                  category: 'Android'
                }}">
                      <a href="#">写文章</a>
                    </router-link>
                  </li>
                  <li><a href="#">EJB</a></li>
                  <li><a href="#">Jasper Report</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分离的链接</a></li>
                  <li class="divider"></li>
                  <li><a href="#">另一个分离的链接</a></li>
                </ul>
              </li>
            </ul>
            <!--右侧-->
            <ul class="nav nav-tabs navbar-right">
              <li v-show="!isLogin">
                <router-link to="/login"><a style="color: #888" href="#"><span class="glyphicon glyphicon-user"></span>注册</a>
                </router-link>
              </li>
              <li v-show="!isLogin">
                <router-link to="/login"><a style="color: #888" href="#"><span
                  class="glyphicon glyphicon-log-in"></span>
                  登录</a></router-link>
              </li>
              <li v-show="isLogin">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  用户名 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">个人信息</a></li>
                  <li><a href="#">EJB</a></li>
                  <li><a href="#">Jasper Report</a></li>
                  <li class="divider"></li>
                  <li><a href="#">分离的链接</a></li>
                  <li class="divider"></li>
                  <li><a href="#" @click="logout">退出登陆</a></li>
                </ul>
                <!--<a style="color: #888" href="#">-->
                <!--<span class="glyphicon"> 用户名</span>-->
                <!--</a>-->
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="tab-content tab-custom-content">
        <!--<div id="home" class="tab-pane fade in active">-->
        <!--<h3>首页</h3>-->
        <!--<p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>-->
        <!--</div>-->
        <home-index id="home" class="tab-pane fade in active"></home-index>
        <div id="menu1" class="tab-pane fade">
          <h3>菜单 1</h3>
          <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>菜单 2</h3>
          <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>菜单 3</h3>
          <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import HomeIndex from './home/home-index';
  import Cookies from './../../utils/cookies';
  import Constant from '../../utils/constant';

  export default {
    name: 'home',
    // 注入reload, AppVue中注册
    inject: ['reload'],
    components: {HomeIndex},
    data: function () {
      return {
        isLogin: false
      }
    },
    // 进入页面时判断是否已经登录
    created: function () {
      // 用户信息数组
      let loginInfoEscape = Cookies.getCookie(Constant.LOGIN_INFO);
      if (null != loginInfoEscape) {
        let loginInfo = decodeURIComponent(loginInfoEscape);
        console.log(loginInfo);
        this.isLogin = true;
      }
    },
    methods: {
      // 退出登陆
      logout: function () {
        Cookies.deleteCookie(Constant.LOGIN_INFO);
        this.isLogin = false;
        // 刷新
        // location.reload()
        // this.$router.go(0)
        // 刷新当前页面
        this.reload();
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .navbar-custom {
    background: linear-gradient(right, #fff, #EEE);
    border: none;
    border-radius: 0;
    margin-bottom: 0;
  }

  .tab-custom-content {
    /*margin: 0 -30px 0 -30px;*/
    /*height: 100%;*/
    padding-top: 20px;
    padding-bottom: 20px;
    /*background: linear-gradient(0deg, white, rgba(128, 128, 128, 0.2));*/
    background: linear-gradient(right, #fff, #EEE);
  }
</style>
